<template>
  <view :class="isShopCart ? 'shop-cart' : ''">
    <movable-area class="online-box" style="width:100vw;" :style="{ height: height }">
      <movable-view @change="changePosition" style="z-index:1000;" :x="x" :y="y" friction="10" inertia="false"
        direction="all" :animation="moveAnimation">
        <view class="kf_button" @click="toWebView">
          <view>
            <image mode="widthFix" src="https://100000063-1252208446.file.myqcloud.com/images/guanzhu.png" alt=""
              class="guanzhu">
          </view>
          <view class="desc">立即关注</view>
        </view>
      </movable-view>
    </movable-area>
  </view>
</template>
<script>
  import {
    CUSTOMER_INFO,
    MERCHANT_INFO,
    USER_INFO
  } from '@/utils/constant';
  import { lithaReport } from '@/utils/litha_report';
  export default {
    data() {
      return {
        x: getApp().globalData.onLineServiceIithaX,
        y: getApp().globalData.onLineServiceIithaY,
        height: 0,
      };
    },
    computed: {
      getBrandType() {
        return this.$store.state.brandType;
      }
    },
    mounted() {
      let systemInfo = uni.getSystemInfoSync()
      this.height = systemInfo.windowHeight - getApp().globalData.navBarHeight + 'px'
    },

    methods: {
      changePosition(e) {
        // getApp().globalData.onLineServiceIithaX = e.detail.x;
        // getApp().globalData.onLineServiceIithaY = e.detail.y;
      },
      toWebView() {
        let clTrackPrams = {
          'c_event_category_1':'browse',
          'c_pagename':  this.currPageRoute,
          'c_link_pagename':'公众号二维码页面',
          'c_link_path':'/pages/public-account/public-account'

        }
        getApp().commonClTrack('c_ebmp_home_click_floating_icon', clTrackPrams)
        lithaReport('c_ebmp_home_click_floating_icon', clTrackPrams)
        this.$commonSensors.followClick()
        // 神策埋点
        this.$commonSensors.lithaTrack.floatIconClick()
        uni.navigateTo({
          url: '/pages/public-account/public-account'
        });
      },
    }
  };
</script>
<style lang="less" scoped>
  .fk-button-box {
    width: 76rpx !important;
    height: 76rpx;
  }

  .kf_button {
    border-radius: 50%;
    overflow: hidden;
    background-image: url(https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0804/yuan.png);
    background-size: 130rpx 130rpx;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;

    .mcl-xinxi {
      font-size: 40rpx;
      color: #fff;
      line-height: 72rpx;
    }

    .desc {
      line-height: 18rpx;
      color: #fff;
      font-size: 20rpx;
      margin-top: 13rpx;
    }
  }

  .flex-box {
    display: flex;
    flex-direction: column;
  }

  .kf_img {
    width: 76rpx;
    height: 76rpx;
  }

  .img-plus-style {
    height: 170rpx;
    width: 170rpx;
    position: fixed;
    bottom: 220rpx;
    right: 30rpx;
    opacity: 1;
  }

  .zindex100 {
    z-index: 100;
  }

  .yc {
    opacity: 1;
    background-color: white;
  }

  .shop-cart .fix-iphonex {
    // margin-top: -120rpx;
  }

  .online-box {
    position: fixed;
    left: 0;
    top: 168rpx;
    z-index: 1000;
    // z-index: -1;
    background-color: transparent;
  }

  movable-area {
    position: relative;
    pointer-events: none;
  }

  movable-view {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    // position: fixed;
    z-index: 9999;
    width: 108rpx !important;
    height: 108rpx !important;
    right: auto;
  }

  .guanzhu {
    width: 41rpx;
    height: 38rpx;
    margin-top: 20rpx;
  }
</style>
